// WordDetailPage.js

import React, { useState } from 'react';
import '../style/WordDetailPage.css';

const WordDetailPage = () => {
  const [isFavorite, setIsFavorite] = useState(false);

  const toggleFavorite = () => {
    setIsFavorite(!isFavorite);
  };

  return (
    <div className="word-detail">
      <h2 className="word-title">Word</h2>
      <p className="word-translate">中文翻译</p>
      <p className="word-example">示例句子</p>
      <button className={`favorite-button ${isFavorite ? 'favorite' : ''}`} onClick={toggleFavorite}>
        {isFavorite ? '取消收藏' : '收藏'}
      </button>
    </div>
  );
};

export default WordDetailPage;
